<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-24 14:32:51
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-07-20 16:11:57
 * @Description:
 *
-->

<template>
  <el-dialog
    class="update-dialog"
    :title="'编辑云盘'"
    :visible="show"
    width="40vw"
    top="15vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeClick"
  >
    <FormOpenstack
      v-if="info.cloudProvider === 'Openstack'"
      ref="updateForm"
      :form-type="2"
      :update-info="info"
    />
    <FormAliyun
      v-if="info.cloudProvider === '阿里云'"
      ref="updateForm"
      :form-type="2"
      :update-info="info"
    />
    <FormHuawei
      v-if="info.cloudProvider === '华为云'"
      ref="updateForm"
      :form-type="2"
      :update-info="info"
    />
    <FormTencent
      v-if="info.cloudProvider === '腾讯云'"
      ref="updateForm"
      :form-type="2"
      :update-info="info"
    />
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="cancelClick">取 消</el-button>
      <el-button
        type="primary"
        size="small"
        :loading="confirmLoading"
        @click="confirmClick"
      >确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import FormOpenstack from './FormOpenstack.vue'
import FormAliyun from './FormAliyun.vue'
import FormHuawei from './FormHuawei.vue'
import FormTencent from './FormTencent.vue'
import { updateStorageBlock } from '@/api/cn-resource'

export default {
  name: 'UpdateDialog',
  components: {
    FormOpenstack,
    FormTencent,
    FormHuawei,
    FormAliyun
  },
  mixins: [],
  props: {
    // 是否显示
    show: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      confirmLoading: false
    }
  },
  computed: {},
  watch: {},
  mounted() {},
  methods: {
    /**
     * @description: 确定
     * @return {*}
     */
    confirmClick() {
      this.$refs.updateForm.validateForm((form) => {
        this.confirmLoading = true
        const params = {
          id: form.id,
          desc: form.desc
        }
        if (this.info.cloudProvider === 'Openstack') {
          params['bootable'] = form.bootable
        }
        updateStorageBlock(params)
          .then((res) => {
            this.$emit('success')
            this.closeClick()
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
    /**
     * @description: 关闭
     * @return {*}
     */
    closeClick() {
      this.$emit('update:show', false)
    },
    /**
     * @description: 取消
     * @return {*}
     */
    cancelClick() {
      this.closeClick()
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.update-dialog {
  /deep/ .el-dialog {
    min-width: 700px;
  }
}
</style>
